import React, { PropTypes, Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Link } from 'react-router'

import Table from './Table'
import NavLink from './NavLink'
import style from './addStore.css'

import { myAjax, ROOTURL_MALL } from '../publicAPI/publicAPI'

class MallProductTypeM extends Component {
	constructor (props, context) {
	    super(props, context)
	    console.log("初始化");
	   
	    this.state = {
	    	page: 1,
	    	delete: false,
	    	deleteId: -1,
	        typeData:[],
	    } ;// 初始化状态

	    var URL = ROOTURL_MALL +'kabuy/category/search.api';

    	var _this = this ;
            fetch(URL, {
                method : 'POST',
                mode: "cors",
                body: JSON.stringify({})
            }).then(res=>{
                if(res.ok){
                    res.json().then(data=>{
                    	// console.log('----------');
                        console.log(data.length);
                        // console.log('----------');
                        var data2 = [];
                        for(var k=0; k<data.length; k++){
                        	if(!(data[k].dd)){
                        		data2.push(data[k]);
                        	}
                        }
                        console.log(res);
                        _this.setState({
                           typeData:data2
                        })
                    })
                }
            })
	}

	componentWillMount() {
	     console.log("将安装");
	}

	componentDidMount() {
	    console.log("安装成功");  
	}

	handleDelete(id) {
		this.setState({
			delete: !this.state.delete,
			deleteId: id
		})
	}

	deleteType(id){
		var URL = ROOTURL_MALL +'kabuy/category/instance.api?id='+this.state.deleteId;
		var _this = this;
        fetch(URL, {
            method : 'DELETE',
            mode: "cors",
            body: {}
        }).then(res=>{
            if(res.ok){
                console.log('delete success');
	               var type = _this.state.typeData;
	               _this.state.typeData.map(function (result,index) {
	                   if(result.id == _this.state.deleteId){
	                       type.splice(index,1);
	                       _this.setState({
	                           typeData: type
	                       })
	                   }
	               })

            }else{
            	console.log(res)
            }
        })
        this.setState({
	        delete: !this.state.delete
	    });
	}


	tHead() {
		var data = [
			{name: "id"},
			{name: "分类名"},
			{name: "操作"}
		];
		const _headArr = [];
		const _width = {
			"0" : "13.6%",
			"1" : "13.8%",
			"2" : "23.3%"
		};
		//_headArr.push(<th style={{width:'5%'}} role="1" key='' onClick={(e) => this.handleSelect(e)}></th>)
		_headArr.push(data.map((item, index) => <th style={{width: _width[index]}} role="1" key={index}>{item.name}</th>))
		return _headArr;
	}

	tBody() {



		var _data = [
			{id: "1", name: "洗发水"},
			{id: "2", name: "护发素"},
			{id: "3", name: "卸妆油"},
			{id: "4", name: "发蜡"}

		];
		return this.state.typeData.map(item => <tr key={item.id}>		
					<td>{item.id}</td>	
					<td>{item.name}</td>
					<td>
						<span><NavLink  to={`/MallProductTypeM/MallProductTypeEditor/${item.id}`} className="rbtn green">查看</NavLink></span>
						<span style={{marginLeft: "15px"}}><a  className="rbtn red" onClick={() => this.handleDelete(item.id)}>删除</a></span>
					</td>
				</tr>)

		
	}

	render(){
		return (

			<div className="right-wapper">
			    <div className="rt-wrap">
			        <h2 className="catagory">
			            <Link to={`/MallIndex`}><span className={style['cata-title']}>首页轮播图</span></Link>
			            <Link to={`/MallProductTypeM`}><span className={style['cata-title-current']}>商品分类管理</span></Link>
			            <Link to={`/MallProductsM`}><span className={style['cata-title']}>商品管理</span></Link>
			            <Link to={`/MallOrderM`}><span className={style['cata-title']}>订单管理</span></Link>
			            <Link to={`/MallStoreM`}><span className={style['cata-title']}>门店管理</span></Link>
			            <Link to={`/MallMember`}><span className={style['cata-title']}>门店店员管理</span></Link>
			            <Link to={`/MallStatisticsM`}><span className={style['cata-title']}>商城统计</span></Link>
			            <Link to={`/MallCoupon`}><span className={style['cata-title']}>优惠券管理</span></Link>
			            <Link to={`/MallProductTypeM/MallProductTypeEditor`}>
			                <button className="add-btn" />
			            </Link>
			        </h2>
			        <div style={{margin:'20px 0 5px'}}>
			        </div>
			        <Table tHead={this.tHead.bind(this)()} tBody={this.tBody.bind(this)()}/>
			    </div>
			    { this.state.delete ?
			    	<div id={style.msgDialog}>
			    		<div className={style['msgDialog_div']}><h3 id={style['msgDialog_title']}>删除提示？</h3><p id={style['msgDialog_content']}>确认删除？</p>
			    			<div className={style['msgDialog_button']}>
			    				<button id={style['msgDialog_yes']} onClick={this.deleteType.bind(this)}>确定</button>
			    				<button id={style['msgDialog_no']} onClick={()=>this.setState({delete: !this.state.delete})}>取消</button>
			    			</div>
			    		</div>
			    	</div> : null}
			</div>
		)
	}
}


export default MallProductTypeM